<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p6_制作网页固定广告条</title>
    <style>
        .top{
            color: white;
            background-color: #5aa4ea;
            height: 120px;
            font-size: 30px;
            position: fixed;
            top: 0;
        /*    viewport视图端口 ，视口，用来展示页面内容的窗口，
        100vw：100%视口的宽度，也就是全屏宽
        100vh：100%视口的高度，也就是全屏高 */
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #fff799;
            left: 20px;

        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
        .mian{
            margin-top:130px ;
        }
    </style>
</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="mian">我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur commodi dignissimos dolores
        facilis itaque minus molestiae mollitia, officia officiis pariatur perferendis quasi quidem, quod, sapiente
        sequi similique sit vel.
    </div>
    <div>Beatae consectetur corporis cum delectus doloribus dolorum earum, eius error excepturi id labore maiores,
        maxime modi nulla perspiciatis placeat porro quasi quis quod recusandae sequi sint vero? Asperiores error,
        voluptate.
    </div>
    <div>Alias atque dolor dolore, error et exercitationem magni molestiae obcaecati officiis omnis similique tempore
        temporibus tenetur! Consectetur corporis et neque nobis omnis quia quisquam, recusandae rem, repellendus
        repudiandae sit voluptates.
    </div>
    <div>Aliquam asperiores atque autem cum cumque, dicta doloremque ea eaque eligendi et facilis inventore ipsa iusto
        maiores modi nemo neque nobis odio optio pariatur quidem rem reprehenderit temporibus voluptas voluptatem.
    </div>
    <div>Aut consequatur culpa dolorem error excepturi perferendis sapiente tenetur. Alias blanditiis consectetur
        consequatur cumque et, expedita explicabo illo ipsa, molestias nulla officia praesentium quisquam soluta sunt
        voluptates! Assumenda, autem harum?
    </div>
    <div>Architecto culpa, delectus deserunt dolor ducimus eum, incidunt ipsum iste magni molestiae nesciunt quidem rem
        soluta tempora tempore temporibus velit, voluptatibus! Ab debitis deserunt maiores praesentium rem tenetur vitae
        voluptas.
    </div>
    <div>A aperiam architecto consequatur corporis cumque dolorem, ducimus enim eveniet facere facilis impedit ipsam
        iste, molestias neque perferendis porro repellat repudiandae ut? Animi consequuntur nisi rem repellat
        reprehenderit saepe ullam.
    </div>
    <div>Doloribus eos, facere laboriosam necessitatibus quas recusandae soluta veritatis! Animi assumenda culpa
        cupiditate distinctio, eaque in nemo nihil, nisi nobis quam quasi quidem tempore unde veritatis voluptas.
        Accusantium, animi, cum.
    </div>
    <div>Autem deleniti dolorem dolorum laborum molestias placeat possimus, quaerat repudiandae? A amet aspernatur
        cumque debitis fugit inventore iste magnam, minima molestiae molestias officia provident reiciendis repudiandae
        sed sint velit vitae?
    </div>
    <div>Alias at consequuntur culpa debitis deleniti dolore eaque esse et explicabo facilis fugit iste, iusto minima
        nesciunt non odit quaerat quibusdam quidem sed similique sit tempora totam velit voluptas voluptatibus?
    </div>
    <div>Alias eum nesciunt odio officiis quia. A debitis deserunt eaque, est iste itaque iusto laborum maiores minima
        modi molestiae numquam officia quas rem, sit ullam velit vero, voluptate voluptatem voluptates!
    </div>
    <div>A autem debitis ducimus ea esse et excepturi expedita fuga fugiat labore modi nam, nesciunt, nobis numquam
        omnis quia quos ratione reprehenderit suscipit voluptatem. Aspernatur aut exercitationem fugit ipsam maiores!
    </div>
    <div>Accusamus alias aliquam aut commodi cupiditate dolor eius eos, error excepturi expedita ipsam labore laudantium
        maxime perferendis quaerat quam quis ratione repellat sapiente sunt tenetur ut vel, velit? Dolorum, officia.
    </div>
    <div>Culpa cum ea incidunt maxime modi quia reprehenderit sapiente vel. Accusamus ad at atque culpa delectus,
        eligendi eum eveniet ipsa laborum nam nobis officia officiis quam, reprehenderit saepe sit, tempora.
    </div>
    <div>A accusamus ad animi aspernatur beatae blanditiis culpa distinctio excepturi fugit ipsum iusto, minus
        necessitatibus neque odio odit officia optio perspiciatis quaerat quibusdam quidem quod recusandae sit tempore
        unde velit.
    </div>
    <div>At, consequuntur cupiditate deleniti dolor dolores esse facilis itaque maxime molestias officia porro
        reprehenderit sint temporibus tenetur unde? Aliquam deserunt eos esse ex labore molestiae odit quisquam quo
        repellendus temporibus.
    </div>
    <div>A blanditiis consequuntur incidunt ipsam iste nihil nulla officia quasi. Aperiam eum illum in incidunt
        perspiciatis quasi rem? Alias blanditiis commodi itaque maxime necessitatibus nobis reiciendis repellat
        reprehenderit sunt vero!
    </div>
    <div>Cupiditate delectus doloribus eligendi explicabo, inventore maiores sed! Id, labore, officia? Animi aperiam,
        deserunt ea eius excepturi illum molestias mollitia perspiciatis praesentium repellat suscipit velit voluptatum!
        Ad fugit minima voluptatum!
    </div>
    <div>Beatae cum cumque, esse, et eveniet expedita explicabo itaque magnam minus obcaecati optio perferendis sed sint
        sit vero vitae voluptas! Amet assumenda eaque enim ipsam ipsum neque nostrum rerum soluta!
    </div>
    <div>Aspernatur aut commodi culpa dolorum ducimus, illum quae repellat sunt tempora veniam. Accusamus consequuntur
        cum earum molestias nisi non officia quia! Adipisci atque laborum quidem repellendus repudiandae rerum sunt
        totam.
    </div>
    <div>Accusantium dolore minus molestiae officia recusandae. Laborum, praesentium, tempore! Ad consequuntur cumque
        dicta dolores, eum incidunt ipsam iste mollitia nostrum odio omnis perspiciatis praesentium sequi. Assumenda
        modi nam odit perspiciatis!
    </div>
    <div>Aut consequuntur, culpa cumque expedita fugiat id illum inventore neque officia optio quas, quod ratione
        reprehenderit repudiandae similique! Dolore dolores error hic iusto labore nisi, pariatur praesentium quasi sit
        temporibus!
    </div>
    <div>A, aliquid asperiores at aut beatae cumque ea est et excepturi expedita facere fugiat hic ipsa ipsum itaque
        minima mollitia natus, necessitatibus omnis quisquam recusandae repellat veniam? Dolor, nihil vitae.
    </div>
    <div>Amet atque blanditiis commodi culpa cum dignissimos dolorem dolores eaque eius error eveniet ex, in inventore
        laboriosam, mollitia necessitatibus, nemo neque numquam officiis quaerat quam quod repellat sequi veniam
        voluptatibus?
    </div>
    <div>Adipisci aliquam aspernatur cum cupiditate deleniti dolorem dolorum ea earum ex illo ipsum, magnam mollitia nam
        numquam omnis praesentium quasi quibusdam ratione saepe soluta suscipit unde veniam veritatis voluptas
        voluptatem!
    </div>
    <div>Ab autem, dolor explicabo facilis illo labore laboriosam neque, non odio, perferendis perspiciatis quas
        repudiandae rerum sapiente sint. Aliquam consequuntur cumque ex ipsum itaque laboriosam magni ratione sapiente,
        temporibus tenetur!
    </div>
    <div>Accusamus consectetur dolores ex ipsam iusto minima nulla officiis reiciendis saepe sequi, tempora totam
        voluptatum. Accusantium adipisci aliquid aut culpa dolores facere iure magnam maiores nemo nisi, non vero
        voluptate!
    </div>
    <div>Distinctio, dolorem, nobis. Accusantium alias autem ea eum necessitatibus nemo nisi sequi soluta veniam.
        Architecto corporis debitis eligendi, et excepturi impedit itaque iusto mollitia neque numquam officia sed
        voluptatibus voluptatum.
    </div>
    <div>Repellat, sunt ut. Ab nostrum reiciendis sint veniam. Beatae consectetur delectus deserunt dignissimos ea
        explicabo, ipsam laborum magnam molestias nisi quidem, quisquam sit tenetur ullam voluptatum. A dolores in
        repellat!
    </div>
    <div>Animi doloremque facilis harum pariatur sapiente. Aperiam, dolore dolorem fugiat harum in inventore magnam modi
        non perspiciatis porro possimus praesentium provident, quas quidem tempora tenetur totam voluptates? Autem
        beatae, minus.
    </div>
    <div>Aliquam amet animi consectetur dolorem dolores earum enim ex excepturi facere facilis ipsa iste magni nisi
        nulla perferendis porro quia, quidem sunt velit voluptatibus. Atque dicta dolor ipsa soluta veritatis.
    </div>
    <div>Delectus dolorum facere hic id minima nisi quaerat sed! Adipisci amet animi blanditiis consequuntur deserunt
        dignissimos enim facere fugit molestias nihil, nisi nostrum optio quasi quo repellat sed velit veritatis!
    </div>
    <div>Adipisci animi assumenda dolorum earum enim eum fuga fugit molestiae mollitia nam, nesciunt nisi odio odit
        officiis placeat porro provident reiciendis reprehenderit repudiandae sapiente sunt suscipit voluptate. Magni,
        nam, unde.
    </div>
    <div>Aut consequuntur, cum debitis distinctio dolor dolore dolorum eaque earum esse fuga illo incidunt ipsum iste
        iusto molestias necessitatibus perspiciatis placeat porro quaerat quam quasi ratione, recusandae rem sunt
        voluptatum.
    </div>
    <div>Alias aliquid assumenda beatae corporis eligendi id ipsum nulla quae quia, ratione rerum sit veniam. Aperiam
        cupiditate dignissimos est minima necessitatibus nisi nulla perferendis quam rem, sed sint tenetur. Sequi.
    </div>
    <div>Aliquam, aperiam asperiores aspernatur assumenda, atque aut dolor eius expedita fuga minima nam neque numquam,
        sint velit voluptate. Amet culpa enim fuga hic, iste obcaecati perspiciatis praesentium similique temporibus
        voluptatibus!
    </div>
    <div>Ab aliquam, aspernatur beatae distinctio, ducimus ipsum molestias mollitia natus nisi ratione, totam vel
        veritatis vero voluptatem voluptatum. Amet delectus et non repudiandae. Asperiores dolores, id nemo quibusdam
        recusandae veritatis?
    </div>
    <div>Asperiores doloribus magni placeat quia quibusdam repellendus rerum sequi temporibus vitae voluptate? Aperiam
        cumque delectus excepturi magnam nulla odio repellendus sed. Ipsum iste maiores nihil officia rem repellat
        rerum, ullam?
    </div>
    <div>Ad cumque debitis dolor facilis maiores natus quaerat ullam voluptate, voluptates voluptatibus. Consequuntur
        dolore earum error eveniet excepturi laudantium quis rem vero voluptatum! At atque doloremque fugiat illo sit
        vitae.
    </div>
    <div>Aut delectus dignissimos distinctio dolorem ex laudantium maiores minima mollitia natus nemo omnis perferendis
        perspiciatis placeat quaerat, reiciendis repudiandae, sequi tempore tenetur totam voluptatem! Accusamus eos eum
        facilis illum quasi?
    </div>
    <div>A accusamus asperiores aut blanditiis culpa, debitis delectus deleniti dolore eligendi illum in iure modi nam
        neque, odit pariatur quasi quis quod repellat repudiandae soluta ullam vero voluptate. Facere, praesentium.
    </div>
    <div>Amet at beatae dignissimos eligendi esse inventore ipsa ipsam ipsum laboriosam minus modi molestiae mollitia
        nisi nostrum provident quaerat, quas quasi quia repellat similique, tempora ullam unde veritatis voluptate
        voluptatem!
    </div>
    <div>Ad assumenda beatae corporis distinctio doloribus, eius error est, et expedita explicabo fuga in ipsam
        molestias neque nihil nulla obcaecati porro quam quo quod recusandae repellendus, sequi totam ullam voluptate.
    </div>
    <div>Adipisci animi aperiam atque consequatur cumque deleniti, dicta eaque eius fugiat harum inventore ipsam iusto
        magnam necessitatibus non odio provident quibusdam quisquam repellendus repudiandae saepe sequi temporibus unde
        ut, veniam?
    </div>
    <div>Beatae consequuntur dignissimos eligendi, est exercitationem facere ipsum iste laudantium libero magnam
        molestiae molestias mollitia nam nesciunt nulla officia optio perferendis provident quaerat, repellendus rerum,
        saepe sint temporibus ut voluptatibus?
    </div>
    <div>Architecto cupiditate delectus dolores iste molestias perspiciatis quae quaerat quia repellendus temporibus.
        Distinctio ducimus eaque, exercitationem facere fuga illo ipsum omnis quo totam! Dolore eum id omnis, quidem
        temporibus voluptatum?
    </div>
    <div>Beatae deserunt dolor eaque nobis odio omnis tenetur. Iusto similique velit veniam? Ad, alias amet doloribus
        eaque enim facilis fuga ipsa, officiis quaerat quos sapiente, sequi. Distinctio expedita quos reprehenderit!
    </div>
    <div>Dicta doloremque, excepturi exercitationem explicabo minima officiis ratione temporibus. Ab adipisci aut
        distinctio earum harum impedit incidunt numquam voluptatibus? Adipisci aut dolor doloremque laudantium
        necessitatibus nostrum quasi quibusdam unde vel.
    </div>
    <div>Aliquam asperiores at corporis dolorem dolores, dolorum eum expedita in, ipsum molestiae odio omnis pariatur
        possimus provident quas quod rem sunt velit. Aliquid blanditiis eius impedit ipsam iusto numquam veniam?
    </div>
    <div>Assumenda delectus facilis fugit impedit nemo omnis, optio veniam. Accusamus delectus doloremque enim illo
        voluptas! Consectetur dolores dolorum ducimus, laboriosam magnam numquam perspiciatis porro quae saepe sequi
        totam ullam ut.
    </div>
    <div>Dolorem dolorum explicabo, ipsa odit veniam voluptas voluptates voluptatum. Blanditiis dicta enim eos, facilis
        impedit iste modi nulla officia praesentium quae repellat totam vero voluptatem! Earum explicabo odit tenetur
        voluptatem.
    </div>
    <div>A ducimus fugit obcaecati vitae voluptas. Consequatur deserunt fuga iusto minima voluptas. Accusamus, aliquid
        asperiores assumenda beatae consequuntur deserunt dolorem dolores exercitationem expedita harum in iusto maxime,
        odio similique, unde.
    </div>
    <div>A illum, molestiae. A amet, aperiam atque consectetur distinctio dolorem dolores doloribus eius eos error in
        iste magni maiores necessitatibus obcaecati odio perspiciatis placeat quos ratione saepe sed sit soluta.
    </div>
    <div>Atque deleniti et laudantium magnam non quo, saepe ullam. A amet animi aut culpa eaque error, esse et,
        explicabo harum inventore, laborum minus necessitatibus possimus quaerat qui sapiente tempore. Magni?
    </div>
    <div>Dolorem eos esse excepturi non perferendis provident quibusdam. Dolor error illum, magnam maxime quasi sit
        velit? Ad alias assumenda atque doloremque eum fugit minima minus, nam nisi numquam praesentium, ullam.
    </div>
    <div>Atque consectetur dignissimos distinctio dolorem et eveniet exercitationem explicabo facere, facilis ipsa
        maiores maxime modi natus nesciunt optio pariatur possimus quidem quis saepe soluta tempore unde velit veritatis
        vero vitae?
    </div>
    <div>Architecto consectetur culpa ducimus eos est et ex facilis illum ipsa iste laudantium, magnam maiores nulla
        officia optio praesentium quae quaerat saepe, sapiente sit soluta suscipit voluptates. Harum maiores, nisi.
    </div>
    <div>Accusantium dolor doloribus enim ipsum non optio possimus qui, reprehenderit sapiente totam. A ab aliquid,
        asperiores delectus doloremque eius ex explicabo facere facilis labore natus nisi quasi quod repudiandae sit!
    </div>
    <div>Assumenda dignissimos ea est hic laboriosam nesciunt odit qui voluptates! Culpa cum eius est explicabo, fuga id
        molestias porro, quaerat quis recusandae rem repellat sed totam! Itaque quas quia voluptate.
    </div>
    <div>A animi asperiores, consequatur cum dolorem, et expedita harum magni molestiae nobis omnis pariatur quibusdam
        quidem quis rerum similique, suscipit tempora velit voluptate voluptatem? Id inventore ipsam laboriosam
        temporibus vel.
    </div></div>
</body>
</html>